<template>
  <div class="main invoice-detail-container">
    <section>
      <div class="invoice-panel">
        <div class="invoice-title">申请信息</div>
        <el-form :model="formData" size="medium" ref="formBase" label-width="120px"  :inline="true">
          <!-- <el-form-item label="单号:">
            <el-input v-model="formData.invoiceApplyInfoDo.invoiceNo" :readonly="true" ></el-input>
          </el-form-item> -->
          <el-form-item label="订单号:">
            <el-input v-model="formData.invoiceApplyInfoDo.orderNo" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="会员名称:">
            <el-input v-model="formData.invoiceApplyInfoDo.memberName" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input v-model="formData.invoiceApplyInfoDo.mobile" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="发票性质:">
            <el-input v-model="formData.invoiceApplyInfoDo.invoiceTypeTxt" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="发票抬头:">
            <el-input v-model="formData.invoiceApplyInfoDo.invoiceTitle" :readonly="true" ></el-input>
            <!-- ELECTRONIC_INVOICE: 电子发票 PAPER_INVOICE：纸质发票 -->
          </el-form-item>
          <el-form-item label="纳税人识别号:">
            <el-input v-model="formData.invoiceApplyInfoDo.gmfTaxpayerIdentifyNo" :readonly="true" ></el-input>
            <!-- xsfTaxpayerIdentifyNo -->
          </el-form-item>
          <el-form-item label="电子邮箱:">
            <el-input v-model="formData.invoiceApplyInfoDo.email" :readonly="true" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="invoice-panel">
        <div class="invoice-title">发票信息</div>
        <el-form :model="formData.invoiceApplyMarkDo" size="medium" ref="formBase" :inline="true">
          <el-form-item label="发票内容:">
            <el-input v-model="formData.invoiceApplyMarkDo.invoiceContent" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="合同签约方:">
            <el-input v-model="formData.invoiceApplyMarkDo.contractingPartyName" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="税率:">
            <el-input v-model="formData.invoiceApplyMarkDo.taxRate" :readonly="true" ></el-input>
          </el-form-item>
          <div style="padding-left: 10px;">
            <div style="line-height: 36px;">蓝票：</div>
            <el-form-item label="序号:">
              <!-- 流水号 -->
              <el-input v-model="formData.invoiceApplyMarkDo.blueSerialNo" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="发票代码:">
              <el-input v-model="formData.invoiceApplyMarkDo.blueInvoiceCode" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="发票号码:">
              <el-input v-model="formData.invoiceApplyMarkDo.blueInvoiceNo" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="开票日期:">
              <el-input v-model="formData.invoiceApplyMarkDo.blueMarkDate" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="金额:">
              <el-input v-model="bluePrice" :readonly="true" ></el-input>
            </el-form-item>
            <!-- blueStatus 蓝票状态 -->
            <el-button type="primary" size="mini" style="margin-top: 5px;" @click="lookPdf(formData.invoiceApplyMarkDo.bluePdfPath)" v-if="formData.invoiceApplyMarkDo.bluePdfPath">查看文件</el-button>
          </div>
          <div style="padding-left: 10px;">
            <div style="line-height: 36px;">红票：</div>
            <el-form-item label="序号:">
              <el-input v-model="formData.invoiceApplyMarkDo.redSerialNo" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="发票代码:">
              <el-input v-model="formData.invoiceApplyMarkDo.redInvoiceCode" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="发票号码:">
              <el-input v-model="formData.invoiceApplyMarkDo.redInvoiceNo" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="开票日期:">
              <el-input v-model="formData.invoiceApplyMarkDo.redMarkDate" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="金额:">
              <el-input v-model="redPrice" :readonly="true" ></el-input>
            </el-form-item>
            <!-- redStatus 状态 -->
            <el-button type="primary" size="mini" style="margin-top: 5px;" @click="lookPdf(formData.invoiceApplyMarkDo.redPdfPath)" v-if="formData.invoiceApplyMarkDo.redPdfPath">查看文件</el-button>
          </div>
        </el-form>
      </div>
      <div class="invoice-panel">
        <div class="invoice-title">其他</div>
        <el-form :model="formData"  size="medium" ref="formBase" label-width="120px" :inline="true">
          <el-form-item label="新建人:">
            <el-input v-model="formData.invoiceApplyInfoDo.createOperator" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="新建时间:">
            <el-input v-model="formData.invoiceApplyInfoDo.createAt" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="修改人:">
            <el-input v-model="formData.invoiceApplyInfoDo.updateOperator" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="修改时间:">
            <el-input v-model="formData.invoiceApplyInfoDo.updateAt" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <el-input v-model="formData.invoiceApplyInfoDo.invoiceStatusTxt" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input v-model="formData.invoiceApplyInfoDo.remark" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="是否库存不足:">
            <el-input v-model="formData.invoiceApplyInfoDo.inventoryStatusTxt" :readonly="true" ></el-input>
          </el-form-item>
          <el-form-item label="红冲说明:">
            <el-input v-model="formData.invoiceApplyInfoDo.redExplain" :readonly="true" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align:center;">
        <el-button type="primary" size="mini" @click="close">关闭</el-button>
      </div>
    </section>
    <el-dialog title="查看发票" :visible.sync="showTaxPic" :modal="false" width="60%" top="50px">
      <div class="tax-pic">
        <img :src="item" alt="" v-for="(item, index) in taxPicList" :key="index" style="width: 100%"/>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
     formData: {
       type: Object,
       default: () => {
         return {
           invoiceApplyInfoDo: {},
            invoiceApplyMarkDo: {}
         }
       }
    },
  },
  data() {
    return {
      taxPicList: [],
      showTaxPic: false
    }
  },
  computed: {
    redPrice() {
      if (this.formData.invoiceApplyMarkDo.redPrice && this.formData.invoiceApplyMarkDo.tax) {
        return (this.formData.invoiceApplyMarkDo.redPrice - this.formData.invoiceApplyMarkDo.tax).toFixed(2)
      }
      return this.formData.invoiceApplyMarkDo.redPrice
    },
    bluePrice() {
      if (this.formData.invoiceApplyMarkDo.bluePrice && this.formData.invoiceApplyMarkDo.tax) {
        return (this.formData.invoiceApplyMarkDo.bluePrice + this.formData.invoiceApplyMarkDo.tax).toFixed(2)
      }
      return this.formData.invoiceApplyMarkDo.bluePrice

    }
  },
  methods: {
    // 查兰pdf
    lookPdf(pdf) {
      this.taxPicList = []
      this.taxPicList = pdf.split(',')
      this.showTaxPic = true
    },
    close(){
      console.log(11)
      this.$emit('close')
    }
  }
}
</script>
<style scoped lang="scss">
.invoice-detail-container {
   .el-form {
      width: 100%;
    .el-input, .el-textarea, .el-select, .el-date-editor{
      width: 100%;
    }
  }
  section {
    padding: 10px;
  }
  .invoice-panel {
    padding: 20px;
    border: 1px solid #eee;
    margin-bottom: 20px;
  }
  .invoice-title {
    padding: 0 0 10px;
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 1px solid #eee;
  }
}
</style>
